<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>宠物详情 - ${pet.name}</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f5f5f5; }
        .container { max-width: 1000px; margin: 0 auto; padding: 20px; }
        .header { background-color: #3498db; color: white; text-align: center; padding: 20px; }
        .nav { background-color: #2980b9; overflow: hidden; }
        .nav a { float: left; display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }
        .nav a:hover { background-color: #1abc9c; }
        .footer { background-color: #34495e; color: white; text-align: center; padding: 10px; position: fixed; bottom: 0; width: 100%; }
        
        .card { background-color: white; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); margin: 20px 0; padding: 20px; }
        .card h2 { color: #3498db; margin-top: 0; }
        .card-item { padding: 10px; margin: 10px 0; }
        .card-item a { color: #2980b9; text-decoration: none; font-weight: bold; }
        .card-item a:hover { text-decoration: underline; }
        
        .columns { display: flex; flex-wrap: wrap; gap: 20px; }
        .column { flex: 1; min-width: 280px; }
        .inline-hint {white-space: nowrap;margin-left: 5px;color: #666;font-size: 0.9em;
        }
        table { width: 100%; border-collapse: collapse; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: center; }
        th { background-color: #f2f2f2; color: #2980b9; }
        .filter { margin-bottom: 20px; }
        .pagination { margin-top: 20px; text-align: center; }
        .pagination a { display: inline-block; padding: 8px 16px; margin: 0 4px; background-color: white; border-radius: 4px; text-decoration: none; color: #2980b9; }
        .pagination a:hover, .pagination a.active { background-color: #2980b9; color: white; }
        
        .pet-attr-container {display: grid;grid-template-columns: 1fr 1fr;gap: 10px;}
        .fa-heart {color: #e74c3c; }
        .fa-heart-o {color: #95a5a6;}
    </style>
</head>
<body>
    <div class="header">
        <h1>宠物详情 - ${pet.name}</h1>
    </div>
    
    <div class="nav">
        <a href="petList">图鉴</a>
        <a href="home">攻略</a>
        <a href="myInfo">我的</a>
    </div>
    
    <div class="container">
        <div class="card">
            <div class="columns">
                <div class="column" style="text-align: center;">
                    <img src="${pageContext.request.contextPath}${pet.image}" 
                         alt="${pet.name}" 
                         style="display: block;width: 80%;max-width: 400px;height: auto; margin: 0 auto;border-radius: 12px;
                            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);transition: transform 0.3s ease;object-fit: contain;" onmouseover="this.style.transform='scale(1.05)'" 
                         onmouseout="this.style.transform='scale(1)'" />
                </div>
                <div class="column">
                    <h2>基本信息</h2>
                    <div class="card-item pet-attr-container">
                        <p><strong>宠物编号:</strong> ${pet.number}</p>
                        <p><strong>宠物属性:</strong> ${pet.attribute}</p>
                        <p><strong>精力:</strong> ${pet.energy}</p>
                        <p><strong>攻击:</strong> ${pet.attack}</p>
                        <p><strong>魔攻:</strong> ${pet.magicAttack}</p>
                        <p><strong>速度:</strong> ${pet.speed}</p>
                        <p><strong>魔防:</strong> ${pet.magicDefense}</p>
                        <p><strong>防御:</strong> ${pet.defense}</p>
                        <p><strong>身高:</strong> ${pet.height} m</p>
                        <p><strong>体重:</strong> ${pet.weight} kg</p>
                    </div>
                    <c:if test="${sessionScope.user != null}">
                        <form action="${pageContext.request.contextPath}/toggleLove" method="post">
                            <input type="hidden" name="petNumber" value="${pet.number}">
                            <button type="submit" style="display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: none; border-radius: 4px; background-color: #f0f0f0; color: #333; cursor: pointer;">
                                ${isLoved ? '取消收藏' : '收藏'}
                                <i class="fas ${isLoved ? 'fa-heart text-danger' : 'fa-heart-o text-gray-500'}"></i>
                            </button>
                        </form>
                    </c:if>
                    <c:if test="${sessionScope.user == null}">
                        <button type="button" onclick="showLoginAlert()" class="btn-love" style="display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: none; border-radius: 4px; background-color: #f0f0f0; color: #333; cursor: pointer;">
                            收藏
                            <i class="fas fa-heart-o text-gray-500"></i>
                        </button>
                        <script>
                            function showLoginAlert() {
                                alert('请先登录后再收藏宠物');
                            }
                        </script>
                    </c:if>
                </div>
            </div>
            
            <div class="card-item">
                <h2>宠物简介</h2>
                <p>${pet.introduction}</p>
            </div>
            
            <div class="card-item">
                <h2>进化链 <span class="inline-hint">(点击跳转)</span></h2>
                <p>前置进化编号: <a href="petDetail?number=${pet.preEvolutionNumber}">${pet.preEvolutionNumber}</a></p>
                <c:if test="${pet.postEvolutionNumber != null && !pet.postEvolutionNumber.isEmpty()}">
                    <p>后置进化编号: <a href="petDetail?number=${pet.postEvolutionNumber}">${pet.postEvolutionNumber}</a></p>
                </c:if>
            </div>
        </div>
        
        <div class="card">
            <h2>宠物技能信息</h2>
            <c:if test="${sessionScope.user != null}">
                <a href="addSkillPage?petNumber=${pet.number}" 
                   style="padding: 8px 16px; background-color: #1abc9c; color: white; text-decoration: none; border-radius: 4px; display: inline-block; margin-bottom: 16px;">
                    添加技能
                </a>
            </c:if>
            <c:if test="${sessionScope.user == null}">
                <a href="#" onclick="alert('请先登录再添加技能！'); return false;" class="btn"
                   style="padding: 8px 16px; background-color: #1abc9c; color: white; text-decoration: none; border-radius: 4px; display: inline-block; margin-bottom: 16px;">
                    添加技能
                </a>
            </c:if>
            <table>
                <tr>
                    <th>技能名</th>
                    <th>技能编号</th>
                    <th>技能威力</th>
                    <th>技能PP</th>
                    <th>技能介绍</th>
                    <th>信息提供者用户名</th>
                    <th>操作</th> 
                </tr>
                <c:forEach items="${skills}" var="skill">
                    <tr>
                        <td>${skill.name}</td>
                        <td>${skill.number}</td>
                        <td>${skill.power}</td>
                        <td>${skill.pp}</td>
                        <td>${skill.introduction}</td>
                        <td>${skill.providerUsername}</td>
                        <td>
                            <c:if test="${sessionScope.user != null}">
                                <a href="${pageContext.request.contextPath}/deleteSkill?id=${skill.id}&petNumber=${pet.number}"  onclick="return confirm('确定要删除该技能吗？')"
                                   style="padding: 6px 12px; background-color: #e74c3c; color: white; text-decoration: none; border-radius: 4px; display: inline-block;">
                                    删除
                                </a>
                            </c:if>
                        </td>
                    </tr>
                </c:forEach>
            </table>
        </div>
    </div>
</body>
</html>